{% extends 'base/base.html' %}
{% load static %}

{% block title %}修改密码 - 妙趣拾光锦盒{% endblock %}

{% block extra_css %}
<style>
    .password-page {
        background-image: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
        border-radius: 15px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    }
    
    .password-card {
        border: none;
        box-shadow: 0 5px 15px rgba(163, 112, 247, 0.1);
        transition: all 0.3s ease;
    }
    
    .password-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(163, 112, 247, 0.15);
    }
    
    .password-header {
        background: linear-gradient(135deg, #a370f7 0%, #ff9fc6 100%);
        color: white;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding: 15px 20px;
    }
    
    .password-header h5 {
        margin: 0;
        font-weight: 600;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .form-control:focus {
        border-color: #a370f7;
        box-shadow: 0 0 0 0.25rem rgba(163, 112, 247, 0.25);
    }
    
    .btn-primary {
        background: linear-gradient(135deg, #a370f7, #ff9fc6);
        border: none;
        box-shadow: 0 4px 10px rgba(163, 112, 247, 0.3);
    }
    
    .btn-primary:hover {
        background: linear-gradient(135deg, #995de7, #ff8ab9);
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(163, 112, 247, 0.4);
    }
    
    .btn-outline-secondary {
        border-color: #a370f7;
        color: #a370f7;
    }
    
    .btn-outline-secondary:hover {
        background-color: #a370f7;
        color: white;
    }
    
    .password-rules {
        background-color: rgba(163, 112, 247, 0.05);
        border-radius: 8px;
        padding: 15px;
    }
    
    .password-rules ul {
        margin-bottom: 0;
        padding-left: 20px;
    }
    
    .password-rules li {
        margin-bottom: 5px;
        color: #666;
    }
    
    .form-label {
        font-weight: 500;
        color: #444;
    }
    
    .key-icon {
        background: linear-gradient(135deg, #a370f7, #ff9fc6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 2rem;
        margin-right: 15px;
    }
</style>
{% endblock %}

{% block content %}
<section class="py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="text-center mb-4">
                    <h1 class="fw-bold">
                        <i class="fas fa-key key-icon"></i>修改密码
                    </h1>
                    <p class="text-muted">设置一个安全的新密码来保护您的账户安全</p>
                </div>
                
                <div class="password-page">
                    <div class="card password-card">
                        <div class="card-header password-header">
                            <h5 class="mb-0"><i class="fas fa-shield-alt me-2"></i>修改您的账户密码</h5>
                        </div>
                        <div class="card-body p-4">
                            {% if messages %}
                            <div class="mb-4">
                                {% for message in messages %}
                                    <div class="alert alert-{{ message.tags }} animate__animated animate__fadeIn" role="alert">
                                        <i class="fas {% if message.tags == 'success' %}fa-check-circle{% elif message.tags == 'error' %}fa-exclamation-circle{% else %}fa-info-circle{% endif %} me-2"></i>
                                        {{ message }}
                                    </div>
                                {% endfor %}
                            </div>
                            {% endif %}
                        
                            <form method="post" class="mt-2">
                                {% csrf_token %}
                                
                                <div class="mb-4">
                                    <label for="id_old_password" class="form-label">
                                        <i class="fas fa-lock me-2 text-primary"></i>当前密码
                                    </label>
                                    <div class="input-group">
                                        <input type="password" name="old_password" class="form-control" id="id_old_password" required>
                                        <button class="btn btn-outline-secondary toggle-password" type="button" data-target="id_old_password">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                    <div class="form-text">请输入您的当前密码，以验证您的身份。</div>
                                </div>
                                
                                <div class="mb-4">
                                    <label for="id_new_password1" class="form-label">
                                        <i class="fas fa-key me-2 text-primary"></i>新密码
                                    </label>
                                    <div class="input-group">
                                        <input type="password" name="new_password1" class="form-control" id="id_new_password1" required>
                                        <button class="btn btn-outline-secondary toggle-password" type="button" data-target="id_new_password1">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                    <div class="password-rules mt-3">
                                        <p class="mb-2 fw-bold"><i class="fas fa-info-circle me-1"></i>密码要求：</p>
                                        <ul>
                                            <li>密码不能与您的其他个人信息太相似</li>
                                            <li>密码必须包含至少8个字符</li>
                                            <li>密码不能是常见的简单密码</li>
                                            <li>密码不能全为数字</li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="mb-4">
                                    <label for="id_new_password2" class="form-label">
                                        <i class="fas fa-check-circle me-2 text-primary"></i>确认新密码
                                    </label>
                                    <div class="input-group">
                                        <input type="password" name="new_password2" class="form-control" id="id_new_password2" required>
                                        <button class="btn btn-outline-secondary toggle-password" type="button" data-target="id_new_password2">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                    <div class="form-text">请再次输入新密码，以便我们验证。</div>
                                </div>
                                
                                <div class="d-flex justify-content-between mt-4">
                                    <a href="{% url 'accounts:profile' %}" class="btn btn-outline-secondary">
                                        <i class="fas fa-arrow-left me-2"></i>返回个人中心
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save me-2"></i>保存新密码
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 密码显示/隐藏切换功能
        const toggleButtons = document.querySelectorAll('.toggle-password');
        toggleButtons.forEach(button => {
            button.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                const passwordInput = document.getElementById(targetId);
                
                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';
                    this.innerHTML = '<i class="fas fa-eye-slash"></i>';
                } else {
                    passwordInput.type = 'password';
                    this.innerHTML = '<i class="fas fa-eye"></i>';
                }
            });
        });
    });
</script>
{% endblock %} 